<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-form-item label="订单编号" prop="orderNo">
          <el-input
            v-model="queryParams.orderNo"
            placeholder="请输入订单编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="申请人" prop="applyUserId">
          <el-select v-model="queryParams.applyUserId" clearable>
            <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申请状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable size="small">
            <el-option v-for="dict in dict.type.receipt_status" :key="dict.value" :label="dict.label"
                       :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="费用类型" prop="receiptBillType">
          <el-select v-model="queryParams.receiptBillType" placeholder="请选择" clearable size="small">
            <el-option v-for="dict in dict.type.receipt_bill_type" :key="dict.value" :label="dict.label"
                       :value="dict.value"/>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
      <el-form-item label="付款时间" prop="payTime">
        <!--        <el-date-picker clearable size="small"-->
        <!--                        v-model="queryParams.payTime"-->
        <!--                        type="date"-->
        <!--                        value-format="yyyy-MM-dd"-->
        <!--                        placeholder="选择付款">-->
        <!--        </el-date-picker>-->

        <el-date-picker v-model="payTimeArr" clearable size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        style="width: 360px" :clearable="false">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="申请时间" prop="applyTime">
        <!--        <el-date-picker clearable size="small"-->
        <!--                        v-model="queryParams.applyTime"-->
        <!--                        type="date"-->
        <!--                        value-format="yyyy-MM-dd"-->
        <!--                        placeholder="选择申请时间">-->
        <!--        </el-date-picker>-->
        <el-date-picker v-model="applyTimeArr" clearable size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        style="width: 360px" :clearable="false">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['bills:application:add']"
        >新增
        </el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['bills:application:export']"
        >导出
        </el-button>
      </el-form-item>
      </el-row>
    </el-form>


    <el-table v-loading="loading" :data="applicationList" border :show-overflow-tooltip="true">
      <el-table-column label="订单编号" align="center" prop="orderNo"/>
      <!--      <el-table-column label="账单编号" align="center" prop="billNo" />-->
      <!--      <el-table-column label="收款账户" align="center" prop="accountNo" />-->
      <el-table-column label="费用类型" align="center" prop="receiptBillType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.receipt_bill_type" :value="scope.row.receiptBillType"/>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="applyUserName"/>
      <el-table-column label="申请金额（元）" align="center" prop="amount"/>
      <el-table-column label="付款状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.receipt_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="会计审核" align="center" prop="accountingReviewer" width="230">
        <template slot-scope="scope" v-if="scope.row.status>1">
          <span>审核人：{{ scope.row.accountingReviewer }}</span><br/>
          <span>审核时间：{{ parseTime(scope.row.accountingReviewerTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="经理审核" align="center" prop="cashierAuditor" width="230">
        <template slot-scope="scope" v-if="scope.row.status>3">
          <span>审核人：{{ scope.row.managerAuditor }}</span><br/>
          <span>审核时间：{{ parseTime(scope.row.managerAuditorTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出纳审核" align="center" prop="cashierAuditor" width="230">
        <template slot-scope="scope" v-if="scope.row.status>5">
          <span>审核人：{{ scope.row.cashierAuditor }}</span><br/>
          <span>审核时间：{{ parseTime(scope.row.cashierAuditorTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="交易单号" align="center" prop="transactionNo"/>
      <el-table-column label="付款时间" align="center" prop="payTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="left"  class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleAudit(scope.row,false)"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status==1 || scope.row.status==3 || scope.row.status==4 || scope.row.status==6 "
            @click="handleUpdate(scope.row)"
            v-hasPermi="['bills:application:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status==1"
            icon="el-icon-document-checked"
            @click="handleAudit(scope.row,true)"
            v-hasPermi="['bills:application:accountingAudit']"
          >会计审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status==2"
            icon="el-icon-document-checked"
            @click="handleAudit(scope.row,true) "
            v-hasPermi="['bills:application:managerAudit']"
          >经理审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status==5"
            icon="el-icon-document-checked"
            @click="handleAudit(scope.row,true) "
            v-hasPermi="['bills:application:cashierAudit']"
          >出纳审核
          </el-button>

          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status==7"
            @click="getPrintInfo(scope.row)"
            v-hasPermi="['bills:application:print']"
          >打印
          </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['bills:application:remove']"
                    >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改财务收付款申请对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      append-to-body
      :close-on-click-modal="false"
      width="800px"
    >

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="关联订单" prop="orderNo">
              <el-input v-model="form.orderNo" placeholder="关联订单">
                <el-button
                  slot="append"
                  v-if="form.id == null"
                  @click="selectOrder"
                >选择
                </el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="品牌/车系/车型" prop="modelName">
              <el-input
                v-model="form.modelName"
                readonly
                placeholder="选择订单自动带出"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="租赁时间" prop="time">
              <el-input
                v-model="form.time"
                readonly
                placeholder="选择订单自动带出"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="费用类型" prop="receiptBillType">
              <el-select v-model="form.receiptBillType" placeholder="请选择" clearable size="small">
                <el-option v-for="dict in dict.type.receipt_bill_type" :key="parseInt(dict.value)" :label="dict.label"
                           :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="申请金额" prop="amount">
              <el-input v-model="form.amount" placeholder="请输入金额"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="申请时间" prop="applyTime">
              <el-date-picker clearable size="small"
                              v-model="form.applyTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择申请时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付凭证" prop="costImage">
              <ImageUpload
                @on-success="applyUrlSuccess"
                v-model="form.applyUrl"
                :limit="6"
                @on-remove="applyUrlRemove"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="申请备注" prop="applyNote">
              <el-input
                v-model="form.applyNote"
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer
      title="订单列表"
      :visible.sync="drawerFlagOrder"
      :direction="directionOrder"
      size="50%"
      :before-close="handleOrderClose"
      :modal="false"
    >
      <div class="table-padding">
        <el-form
          :model="queryParamsOrder"
          ref="queryOrderForm"
          :inline="true"
          class="search"
          label-width="80px"
        >
          <el-form-item label="订单编号" prop="orderNo">
            <el-input
              v-model="queryParamsOrder.orderNo"
              style="width: 220px"
              placeholder="请输入订单编号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQueryOrder"
            >搜索
            </el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQueryOrder"
            >重置
            </el-button
            >
          </el-form-item>
        </el-form>
        <el-table v-loading="loadingOrderDrawer" :data="OrderDrawerList" border>
          <el-table-column
            label="订单号"
            min-width="200"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ row.orderNo }}
            </template>
          </el-table-column>
          <el-table-column
            label="承租人"
            min-width="130"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span>{{ row.memberName }}</span
              >、
              <span>{{ row.memberPhone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="预计取还时间"
            min-width="180"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span style="color: #d9001b">取：{{ row.rentalStartTime }}</span
              >&nbsp;&nbsp;&nbsp;
              <span style="color: #dd5d1b">还：{{ row.rentalEndTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="租期"
            min-width="130"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <div>{{ row.leaseDays }}天</div>
            </template>
          </el-table-column>
          <el-table-column
            label="预定车型"
            min-width="150"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span>{{ row.modelName }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            fixed="left"
            class-name="small-padding fixed-width"
            width="100px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleOrderUpdate(scope.row)"
              >选择
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalOrder > 0"
          :total="totalOrder"
          :page.sync="queryParamsOrder.pageNum"
          :limit.sync="queryParamsOrder.pageSize"
          @pagination="getOrderList"
        />
      </div>
    </el-drawer>
    <!--  详情或审核  -->
    <el-dialog
      :title="titleShow"
      :visible.sync="openShow"
      append-to-body
      width="900px"
    >

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24" class="table-padding">
            <el-descriptions
              :column="2"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">订单号</template>
                {{ form.orderNo }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">所属门店</template>
                {{ form.storeName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">申请费用（元）</template>
                {{ form.amount }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">状态</template>
                <dict-tag :options="dict.type.receipt_status" :value="form.statuss"/>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">车型信息</template>
                {{ form.modelName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">租赁时间</template>
                {{ form.time }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">费用类型</template>
                <dict-tag :options="dict.type.receipt_bill_type" :value="form.receiptBillType"/>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">申请人</template>
                {{ form.applyUserName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">申请时间</template>
                {{ form.applyTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">支付凭证</template>
                <template v-for="item in form.applyUrlList">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                            class="mmv-image" fit="cover"
                            style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">申请备注</template>
                {{ form.applyNote }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row v-if="form.statuss > 1">
          <el-col :span="24" class="table-padding">
            <el-descriptions
              :column="2"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">会计审核人</template>
                {{ form.accountingReviewer }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">审核时间</template>
                {{ form.accountingReviewerTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">审核附件</template>
                <template v-for="item in form.accountingUrlList">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                            class="mmv-image" fit="cover"
                            style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">备注</template>
                {{ form.accountingReviewerNote }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row v-if="form.statuss>3">
          <el-col :span="24" class="table-padding">
            <el-descriptions
              :column="2"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">经理审核人</template>
                {{ form.managerAuditor }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">审核时间</template>
                {{ form.managerAuditorTime }}
              </el-descriptions-item>
            </el-descriptions>

            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">审核附件</template>
                <template v-for="item in form.managerUrlList">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                            class="mmv-image" fit="cover"
                            style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">备注</template>
                {{ form.managerAuditorNote }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row v-if="form.statuss>5">
          <el-col :span="24" class="table-padding">
            <el-descriptions
              :column="2"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">出纳审核人</template>
                {{ form.cashierAuditor }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">审核时间</template>
                {{ form.cashierAuditorTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">交易单号</template>
                {{ form.transactionNo }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">审核附件</template>
                <template v-for="item in form.managerUrl">
                  <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]"
                            class="mmv-image" fit="cover"
                            style="width:160px;height:90px;margin-right:15px;"></el-image>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
              :column="1"
              border
              :labelStyle="{ width: '140px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label">
                <template slot="label">备注</template>
                {{ form.cashierAuditorNote }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row v-if="form.statuss==1 && openDetail">
          <MmvTitle title="会计审核"></MmvTitle>
          <el-col :span="24" v-if="form.statuss==1">
            <el-form-item label="审核" prop="status">
              <el-radio-group v-model="form.status" size="medium">
                <el-radio :label="2">审核通过
                </el-radio>
                <el-radio :label="3">审核拒绝
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="审核时间" prop="accountingReviewerTime">
              <el-date-picker clearable size="small"
                              v-model="form.accountingReviewerTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择审核时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核附件" prop="accountingUrl">
              <ImageUpload
                @on-success="accountingUrlSuccess"
                v-model="form.accountingUrl"
                :limit="6"
                @on-remove="accountingUrlRemove"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="审核备注" prop="accountingReviewerNote">
              <el-input
                v-model="form.accountingReviewerNote"
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.statuss==2&& openDetail">
          <MmvTitle title="经理审核"></MmvTitle>

          <el-col :span="24">
            <el-form-item label="审核" prop="status">
              <el-radio-group v-model="form.status" size="medium">
                <el-radio :label="5">审核通过
                </el-radio>
                <el-radio :label="4">审核拒绝
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="审核时间" prop="managerAuditorTime">
              <el-date-picker clearable size="small"
                              v-model="form.managerAuditorTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择审核时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核附件" prop="managerUrl">
              <ImageUpload
                @on-success="managerUrlSuccess"
                v-model="form.managerUrl"
                :limit="6"
                @on-remove="managerUrlRemove"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="审核备注" prop="managerAuditorNote">
              <el-input
                v-model="form.managerAuditorNote"
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.statuss==5 && openDetail">
          <MmvTitle title="出纳审核"></MmvTitle>

          <el-col :span="24">
            <el-form-item label="审核" prop="status">
              <el-radio-group v-model="form.status" size="medium">
                <el-radio :label="7">审核通过
                </el-radio>
                <el-radio :label="6">审核拒绝
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="交易单号" prop="transactionNo">
              <el-input v-model="form.transactionNo" placeholder="请输入交易单号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="审核时间" prop="cashierAuditorTime">
              <el-date-picker clearable size="small"
                              v-model="form.cashierAuditorTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择审核时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核附件" prop="cashierUrl">
              <ImageUpload
                @on-success="cashierUrlSuccess"
                v-model="form.cashierUrl"
                :limit="6"
                @on-remove="cashierUrlRemove"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height: 58px; overflow: hidden">
            <el-form-item label="审核备注" prop="cashierAuditorNote">
              <el-input
                v-model="form.cashierAuditorNote"
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAuditForm"
                   v-if="form.statuss==1 || form.statuss==2 || form.statuss ==5">确 定
        </el-button>
        <el-button @click="openShow=false , openDetail=false">取 消</el-button>
      </div>
    </el-dialog>
    <!--    打印-->
    <el-dialog
      title="打印信息"
      :visible.sync="openPrint"
      append-to-body
      width="900px"
    >
      <div id="printArea">
        <div class="printTitle">付款申请</div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="24" class="table-padding">
              <el-descriptions
                :column="2"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">订单号</template>
                  {{ form.orderNo }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">所属门店</template>
                  {{ form.storeName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">申请费用（元）</template>
                  {{ form.amount}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">状态</template>
                  <dict-tag :options="dict.type.receipt_status" :value="form.statuss"/>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">车型信息</template>
                  {{ form.modelName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">租赁时间</template>
                  {{ form.time }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">费用类型</template>
                  <dict-tag :options="dict.type.receipt_bill_type" :value="form.receiptBillType"/>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">申请人</template>
                  {{ form.applyUserName }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">申请时间</template>
                  {{ form.applyTime }}
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                :column="1"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">申请备注</template>
                  {{ form.applyNote }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="table-padding">
              <el-descriptions
                :column="2"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">会计审核人</template>
                  {{ form.accountingReviewer }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">审核时间</template>
                  {{ form.accountingReviewerTime }}
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                :column="1"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">备注</template>
                  {{ form.accountingReviewerNote }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="table-padding">
              <el-descriptions
                :column="2"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">经理审核人</template>
                  {{ form.managerAuditor }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">审核时间</template>
                  {{ form.managerAuditorTime }}
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions
                :column="1"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">备注</template>
                  {{ form.managerAuditorNote }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="table-padding">
              <el-descriptions
                :column="2"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">出纳审核人</template>
                  {{ form.cashierAuditor }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">审核时间</template>
                  {{ form.cashierAuditorTime }}
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions
                :column="1"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">交易单号</template>
                  {{ form.transactionNo }}
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                :column="1"
                border
                :labelStyle="{ width: '140px' }"
              >
                <el-descriptions-item label-class-name="my-descriptions-label">
                  <template slot="label">备注</template>
                  {{ form.cashierAuditorNote }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>


        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-print="printArea">
          确定打印
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listApplication,
  getApplication,
  delApplication,
  addApplication,
  updateApplication,
  exportApplication,
  auditApplication
} from "@/api/bills/application";
import {index} from "@/api/order";
import {userlist} from '@/api/system/user'

export default {
  name: "Application",
  dicts: ['receipt_status', 'receipt_bill_type'],
  data() {
    return {
      openPrint: false,
      // 打印设置
      printArea: {
        id: "printArea",
        popTitle: "页眉部分",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
      titleShow: "详情",
      openShow: false,
      openDetail: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      userList: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 财务收付款申请表格数据
      applicationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      payTimeArr:[],
      applyTimeArr:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        billNo: null,
        financeType: null,
        accountNo: null,
        transactionNo: null,
        payTime: null,
        applyTime: null,
        applyUserId: null,
        applyUserName: null,
        applyNote: null,
        amount: null,
        status: null,
        accountingReviewer: null,
        tenantId: null,
        accountingReviewerTime: null,
        accountingReviewerNote: null,
        cashierAuditor: null,
        cashierAuditorNote: null,
        cashierAuditorTime: null,
        cashierAuditorId: null,
        receiptBillType: null,
        accountingReviewerId: null,
        applyUrl: null,
        accountingUrl: null,
        cashierUrl: null,
        managerAuditorTime: null,
        managerUrl: null,
        managerAuditorNote: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        orderNo: [
          {required: true, message: '订单不能为空', trigger: 'change'},
        ],
        applyTime: [
          {required: true, message: '申请时间不能为空', trigger: 'blur'},
        ],
        accountingReviewerTime: [
          {required: true, message: '审核时间不能为空', trigger: 'blur'},
        ],
        cashierAuditorTime: [
          {required: true, message: '审核时间不能为空', trigger: 'blur'},
        ],
        managerAuditorTime: [
          {required: true, message: '审核时间不能为空', trigger: 'blur'},
        ],
        receiptBillType: [
          {required: true, message: '请选择费用类型', trigger: 'change'},
        ],
        amount: [{
          required: true,
          message: '请输入申请金额',
          trigger: 'change'
        }, {
          pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/,
          message: '申请金额输入有误',
          trigger: 'blur',
        }],
      },
      loadingDrawer: false,
      queryParamsOrder: {
        pageNum: 1,
        pageSize: 10,
        clickOrder: 2,
      },
      drawerFlagOrder: false,
      loadingOrderDrawer: false,
      directionOrder: 'rtl',
      OrderDrawerList: [],
      totalOrder: 0,
    };
  },
  created() {
    this.getList();
    this.getUserList()
  },
  methods: {
    /** 查询用户列表 */
    getUserList() {
      userlist({}).then((response) => {
        this.userList = response.data
        console.log(this.userlist)
      })
    },
    //选择订单
    handleOrderUpdate(row) {
      this.form.orderNo = row.orderNo
      this.form.modelName = row.modelName
      this.form.startTime = row.rentalStartTime + ':00'
      this.form.estimateEndTime = row.rentalEndTime + ':00'
      this.form.time = row.rentalStartTime + ' 至 ' + row.rentalEndTime
      this.form.estimateDay = row.leaseDays
      this.drawerFlagOrder = false
    },
    /** 查询订单列表 */
    getOrderList() {
      this.loadingDrawer = true
      index(this.queryParamsOrder).then((response) => {
        this.OrderDrawerList = response.rows
        this.totalOrder = response.total
        this.loadingDrawer = false
      })
    },
    selectOrder() {
      this.resetQueryOrder()
      this.drawerFlagOrder = true
      this.getOrderList()
    },
    /** 重置按钮操作 */
    resetQueryOrder() {
      this.resetForm('queryOrderForm')
      this.handleQueryOrder()
    },
    handleQueryOrder() {
      this.queryParamsOrder.pageNum = 1
      this.getOrderList()
    },
    handleOrderClose(done) {
      done()
    },
    // 删除申请图片
    applyUrlRemove(file) {
      this.form.applyUrl = null
    },
    // 上传成功申请图片回调
    applyUrlSuccess(res) {
      this.form.applyUrl = res.fileName
      this.$refs['form'].validateField('applyUrl')
    },
    // 删除出纳图片
    cashierUrlRemove(file) {
      this.form.cashierUrl = null
    },
    // 上传成功出纳图片回调
    cashierUrlSuccess(res) {
      this.form.cashierUrl = res.fileName
      this.$refs['form'].validateField('cashierUrl')
    },
    // 删除会计审核图片
    accountingUrlRemove(file) {
      this.form.accountingUrl = null
    },
    // 上传成功会计审核图片回调
    accountingUrlSuccess(res) {
      this.form.accountingUrl = res.fileName
      this.$refs['form'].validateField('accountingUrl')
    },
    // 删除经理审核图片
    managerUrlRemove(file) {
      this.form.managerUrl = null
    },
    // 上传成功经理审核图片回调
    managerUrlSuccess(res) {
      this.form.managerUrl = res.fileName
      this.$refs['form'].validateField('managerUrl')
    },
    /** 查询财务收付款申请列表 */
    getList() {
      this.loading = true;
      if(this.applyTimeArr){
        this.queryParams.applyStartTime = this.applyTimeArr[0]
        this.queryParams.applyEndTime = this.applyTimeArr[1]
      }else{
        this.queryParams.applyStartTime = null
        this.queryParams.applyEndTime = null
      }
      if(this.payTimeArr){
        this.queryParams.payStartTime = this.payTimeArr[0]
        this.queryParams.payEndTime = this.payTimeArr[1]
      }else{
        this.queryParams.payStartTime = null
        this.queryParams.payEndTime = null
      }
      listApplication(this.queryParams).then(response => {
        this.applicationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderNo: null,
        billNo: null,
        financeType: null,
        accountNo: null,
        transactionNo: null,
        payTime: null,
        applyTime: null,
        applyUserId: null,
        applyUserName: null,
        applyNote: null,
        amount: null,
        status: 0,
        accountingReviewer: null,
        tenantId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        accountingReviewerTime: null,
        accountingReviewerNote: null,
        cashierAuditor: null,
        cashierAuditorNote: null,
        cashierAuditorTime: null,
        cashierAuditorId: null,
        receiptBillType: null,
        accountingReviewerId: null,
        managerAuditorTime: null,
        managerUrl: null,
        managerAuditorNote: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.applyTimeArr = []
      this.payTimeArr = []
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "付款申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getApplication(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "付款申请";
      });
    },
    /** 审核按钮操作 */
    handleAudit(row, openDetail) {
      this.openDetail = openDetail;
      this.reset();
      const id = row.id || this.ids
      getApplication(id).then(response => {
        this.form = response.data;
        this.openShow = true;
        this.form.statuss = this.form.status;
        if (this.form.status == 1) {
          this.form.status = 2;
          this.titleShow = "会计审核";
        } else if (this.form.status == 2) {
          this.form.status = 5;
          this.titleShow = "经理审核";
        } else if (this.form.status == 5) {
          this.form.status = 7;
          this.titleShow = "出纳审核";
        }
        if (this.form.applyUrl) {
          this.form.applyUrlList = this.form.applyUrl.split(',');
        }
        if (this.form.accountingUrl) {
          this.form.accountingUrlList = this.form.accountingUrl.split(',');
        }
        if (this.form.managerUrl) {
          this.form.managerUrlList = this.form.managerUrl.split(',');
        }
        if (this.form.cashierUrl) {
          this.form.cashierUrlList = this.form.cashierUrl.split(',');
        }
      });
    },
    //获取打印信息
    getPrintInfo(row) {
      this.reset();
      const id = row.id || this.ids
      getApplication(id).then(response => {
        this.openPrint = true;
        this.form = response.data;
        this.form.statuss = this.form.status;

      });
    },
    /*审核*/
    submitAuditForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          auditApplication(this.form).then(response => {
            this.$modal.msgSuccess("审核成功");
            this.openShow = false;
            this.openDetail = false;
            this.getList();
          });
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateApplication(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addApplication(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除付款申请编号为"' + ids + '"的数据项？').then(function () {
        return delApplication(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有付款申请数据项？').then(() => {
        this.exportLoading = true;
        return exportApplication(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    }
  }
};
</script>

<style scoped>
@media print {
  @page {
    size: landscape; /*对打印的尺寸进行设置*/
    margin: 0 ;  /*去掉上面的水印*/
  }
}

.printTitle {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style>
